<template>
  <div class="test-static">
    <h3>测试静态资源使用</h3>
    <img scr="@/assets/images/pic.jpg"/>
    <img :src="imgUrl" alt="" class="imgUrl"/>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import imgIcon from "@/assets/images/cat.jpg"
  console.log('静态图片--', imgIcon)
  import jsonText from '@/demo/jsonText.json' // 读取 json 文件
  console.log('读取json--', jsonText)
  
  // const imgUrl = new URL('../assets/images/png/year.png', import.meta.url).href // new Url中无法使用别名，但是可以拼接路径，详见vite文档
  // console.log(import.meta.url,'使用 new URL ---------',imgUrl)

  
  // js函数，放src目录下
  const getImageUrl = (url: string) => {
    return new URL(`../assets/${url}`, import.meta.url).href;
  }
  // vue代码 <img :src="getImageUrl('image/logo.png')" />
  const imgUrl = ref('')
  onMounted(() =>{
    imgUrl.value = getImageUrl("images/png/year.png")
    console.log('使用 new URL ---------',imgUrl)
  })


</script>
<style lang="scss" scoped>
.test-static {
 text-align: center;
 padding: 20px 0;
 .imgUrl {
   width:100%;
   height:300px;
   margin-top: 10px;
 }
}
</style>